<template>
  <div class="select-address">

    <!--弹窗-选择门店地址-->

      <mt-picker :slots="addressSlots" class="picker" @change="onAddressChange" :visible-item-count="5" ></mt-picker>
      <div class="button-content">
        <mt-button type="danger" @click="handleSelectAddress">确认</mt-button>
      </div>
    </mt-popup>
    <!--弹窗-选择门店地址-->
  </div>
</template>

<script>
export default {
  data(){
    return{
      resAddress:[],
      addressSlots: [
        {
          flex: 1,
          defaultIndex: 1,
          values:[],
          className: 'slot1',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot4'
        }, {
          flex: 1,
          values: [],
          className: 'slot5',
          textAlign: 'center',
          id:[],
        }
      ],
      address:{
        title:'',
        provinceId:'',
        cityId:'',
        districtId:'',
      }
    }

  },
  mounted(){
    this.getAddress();
    this.$nextTick(() => {
      setTimeout(() => {//这个是一个初始化默认值的一个技巧
        this.addressSlots[0].defaultIndex = 0;
      }, 100);
    });
  },
  methods:{
    /**获取地区接口**/
    getAddress(){
      this.$axios({
        method: 'get',
        url:'gp/bu/wechat!getPcdData.do',
      }).then((res)=>{
        if(res.data.result==true && res.data.statusCode==200){
        this.resAddress=res.data.object.provinceList;
        console.log(this.resAddress,111)
        for(var i=0;i<this.resAddress.length;i++){
          this.addressSlots[0].values.push(this.resAddress[i].province)
        };
      }else{
        Toast({
          message: res.data.message,
          position: 'middle',
          duration:1000
        });
      }
    })
    },
    /**选择地区**/
    onAddressChange(picker, values) {
      var shiShow = [];
      var shi = [];
      var xian = [];
      var xianShow = [];

      /**市**/
      for(var i=0;i<this.resAddress.length;i++){
        if(this.resAddress[i].province==values[0]){
          for(var j=0;j<this.resAddress[i].cityList.length;j++){
            shi.push(this.resAddress[i].cityList[j])
            shiShow.push(this.resAddress[i].cityList[j].city)
          };
        }
      };
      picker.setSlotValues(1, shiShow);
      /**区**/
      if(typeof values[1]!=='undefined'){
        for(var i=0;i<shi.length;i++){
          if(shi[i].city==values[1]){
            console.log(shi,112)
            for(var j=0;j<shi[i].districtList.length;j++){
              xianShow.push(shi[i].districtList[j].district)
              xian.push(shi[i].districtList[j])
            };
          }
        };
        picker.setSlotValues(2, xianShow);
        for(var i=0;i<xian.length;i++){
          if(xian[i].district==values[2]){
            this.address.provinceId=xian[i].provinceId;
            this.address.cityId=xian[i].cityId;
            this.address.districtId=xian[i].districtId;
          }
        };
      }

      this.address.title=values[0]+'-'+values[1]+'-'+values[2]
    },
    /**确认地区**/
    handleSelectAddress(){
      this.$emit('getAddress',this.address)
    }
  }
}
</script>
<style>

  .popup-address{
    width: 100%;
    padding:10px 0 0;
  }

  .popup-address .picker-item{
    color:#999
  }
  .popup-address .picker-item.picker-selected{
    color:#007EE5
  }
  .popup-address .button-content{
    padding:24px 40px;
  }
  .popup-address .button-content .mint-button--normal{
    background: -webkit-linear-gradient(left, #03adf3 , #0080e5); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #03adf3 , #0080e5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #03adf3 , #0080e5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #03adf3 , #0080e5); /* 标准的语法 */
    width: 100%;
  }
</style>
